<!--  -->
<template>
    <div class="">
      <el-table stripe border :data="list" style="width: 100%">
        <el-table-column prop="id" label="序列号" width="180"></el-table-column>
        <el-table-column label="图片" width="180">
          <template #default="scope">
            <el-image :src="onFilterUrl(scope.row.picture)"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="product" label="商品描述" />
        <el-table-column prop="price" label="商品价格" />
        <el-table-column prop="oldprice" label="商品原价" />
        <el-table-column prop="categoryname" label="商品分类" />
        <el-table-column align="right">
          <template #header>
            <el-input size="small" placeholder="请输入您要搜索的商品" />
          </template>
          <template #default="scope">
            <el-popconfirm title="确认删除该商品吗?"
            confirm-button-text="确认"
                          cancel-button-text="取消"
                          @confirm="onDelete(scope.row.id)">
              <template #reference>
                <el-button>
                  <el-button size="small" @click="">编辑</el-button>
                  <el-button size="small" type="danger">删除</el-button>
                    </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        :page-sizes="[5, 10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
      ></el-pagination>
    </div>
  </template>
  
  <script>
  import { RequestProductList, RequestDeleteProduct } from "@/api/product";
  import { baseURL } from "../../../utils/request";
  export default {
    components: {},
    data() {
      //这里存放数据
      return {
        list: [],
        currentNo: 2,
        pageSize: 5,
        total: 0,
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getProductList();
    },
  
    //方法集合
    methods: {
      async getProductList() {
        let data = await RequestProductList(this.currentNo, this.pageSize);
        let { resultCode, resultInfo } = data;
        if (resultCode == 1) {
          this.list = resultInfo.list;
          this.total = resultInfo.total; //总记录条数
        }
      },
      onFilterUrl(url) {
        return url.indexOf("http") == -1 ? `${baseURL}${url}` : url;
      },
      // 更新页数的操作
      handleSizeChange(value) {
        //   console.log("handleSizeChange>>>",value);
        this.pageSize = value;
      },
      // 页号改变的操作
      handleCurrentChange(value) {
        //   console.log("handleCurrentChange>>>",value);
        this.currentNo = value;
        this.getProductList();
      },
      // 删除方法
      onDelete(id) {
        RequestDeleteProduct(id).then((data) => {
            let { resultCode, resultInfo } = data;
            if (resultCode == 1) {
              ElMessage.success("删除成功" + id);
              this.getProductList();
            }
          });
      },
    },
  };
  </script>
  <!-- //@import url()；引入css类 -->
  <style scoped></style>
  